<template>
  <div class="WithdrawalRecord">
    <el-card class="searchBox">
      <div class="one">
        <el-date-picker
          style="margin-right: 20px"
          v-model="gradeTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-input
          v-model="id"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>

        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>

        <el-select v-model="styleVal" placeholder="提现方式">
          <el-option label="微信" value="2"> </el-option>
          <el-option label="支付宝" value="1"> </el-option>
        </el-select>
        <el-input v-model="orderNum" placeholder="请输入订单号"></el-input>
        <el-select v-model="stateVal" placeholder="提现状态">
          <el-option label="提现中" value="0"> </el-option>
          <el-option label="成功提现" value="1"> </el-option>
          <el-option label="驳回订单" value="2"> </el-option>
          <el-option label="提现失败" value="3"> </el-option>
        </el-select>
        <el-select v-model="checkVal" placeholder="审核方式">
          <el-option label="人工审核" value="2"> </el-option>
          <el-option label="自动审核" value="1"> </el-option>
        </el-select>
        <el-button class="btn" @click="rechargeRechargeAuditBtn"
          >搜索查询</el-button
        >
      </div>
      <el-button @click="excel" style="float: right; margin: 10px"
        >导出Excel</el-button
      >
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="requestTime" label="申请时间"> </el-table-column>
        <el-table-column prop="finance_approve_time" label="提现时间">
        </el-table-column>
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="name" label="用户昵称"> </el-table-column>
        <el-table-column prop="withdrawalAmount" label="提现金额">
        </el-table-column>
        <el-table-column prop="account_type" label="提现方式">
        </el-table-column>
        <el-table-column prop="operat_type" label="审核方式">
          <template slot-scope="scope">
            {{ scope.row.operat_type == "1" ? "自动审核" : "人工审核" }}
          </template>
        </el-table-column>
        <el-table-column prop="withdrawalStatus" label="提现结果">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template slot-scope="scope">
            <!-- <el-button
              type="danger"
              @click="rechargeWithdrawalBanBtn(scope.row)"
              size="small"
              v-if="scope.row.ban == 0"
              >封禁提现</el-button
            >
            <el-button
              size="small"
              @click="rechargeWithdrawalUnsealBtn(scope.row)"
              type="success"
              v-if="scope.row.ban == 1"
              >解封</el-button
            > -->
            <el-button
              size="small"
              :disabled="scope.row.operat_type == '1' ? true : false"
              @click="openDialog(scope.row)"
              >审核详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="审核详情" :visible.sync="dialogVisible" width="40%">
      <div>
        <p>主管审批信息</p>
        <el-form
          style="display: flex; flex-wrap: wrap; justify-content: space-around"
          :model="form"
        >
          <el-form-item label="审批人" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批时间" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录账号" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.num"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登陆IP" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.ip"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批结果" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.anser"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.msg"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <p>财务审批信息</p>
        <el-form
          style="display: flex; flex-wrap: wrap; justify-content: space-around"
          :model="form1"
        >
          <el-form-item label="审批人" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批时间" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录账号" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.num"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登陆IP" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.ip"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批结果" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.anser"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.msg"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  rechargeWithdrawalAudit,
  rechargeWithdrawalBan,
} from "@/api/AuditManagement";
export default {
  components: { Pagination },
  data() {
    return {
      gradeTimeVal: "", // 提现时间
      id: "", //id
      phone: "", //手机号
      styleVal: "", //提现方式
      orderNum: "", //订单号
      stateVal: "", //提现状态
      checkVal: "", //审核方式
      gradeTimeValStartDate: "", //时间开始
      gradeTimeValEndDate: "", //时结束

      //   日期时间选择器
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      tableData: [], //列表
      loading: false,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      //   主管审批表单
      form: {
        name: "",
        time: "",
        num: "",
        ip: "",
        anser: "",
        msg: "",
      },
      formLabelWidth: "80px",

      // 财务审批表单
      form1: {
        name: "",
        time: "",
        num: "",
        ip: "",
        anser: "",
        msg: "",
      },
      dialogVisible: false,
      formLabelWidth: "80px",
    };
  },
  created() {
    this.getWithdrawalList();
  },
  methods: {
    // 获取列表
    async getWithdrawalList() {
      this.loading = false;
      let { code, data } = await rechargeWithdrawalAudit({
        page: this.page,
        pageSize: this.pageSize,
        phone: this.phone, //电话
        id: this.id, //用户id
        startDate: this.gradeTimeValStartDate, //开始时间
        endDate: this.gradeTimeValEndDate, //结束时间
        state: this.stateVal, // 提现状态
        orderNum: this.orderNum, //订单号
        operat_type: this.checkVal, //审核方式
        account_type: this.styleVal, //提现方式
      });
      if (code == 0) {
        console.log(data, "3356");
        this.tableData = data.list;
        this.total = parseInt(data.count);
        this.loading = false;
      }
    },
    // 搜索
    rechargeRechargeAuditBtn() {
      this.getWithdrawalList();
    },
    //时间选择器
    focus(time) {
      if (!this.gradeTimeVal) {
        this.gradeTimeVal = [];
      }
      this.gradeTimeValStartDate = this.gradeTimeVal[0];
      this.gradeTimeValEndDate = this.gradeTimeVal[1];
    },
    getList() {
      this.getWithdrawalList();
    },
    // 封禁
    rechargeWithdrawalBanBtn(row) {
      this.$confirm("此操作将封禁该用户的提现功能, 是否继续?", "封禁提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeWithdrawalBan({
            id: row.id,
            ban: 0,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "封禁成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消封禁",
          });
        });
    },
    //解封
    rechargeWithdrawalUnsealBtn(row) {
      this.$confirm("此操作将解封该用户提现功能, 是否继续?", "解封提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeWithdrawalBan({
            id: row.userId,
            ban: 1,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "解封成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解封",
          });
        });
    },
    // 打开审核详情弹出框
    openDialog(row) {
      console.log(row);
      this.dialogVisible = true;
      this.form.ip = row.charge_ip;
      this.form1.ip = row.finance_ip;
      this.form.num = row.charge_account;
      this.form1.num = row.finance_account;
      this.form.name = row.charge_approve_name;
      this.form1.name = row.finance_approve_name;
      this.form.time = row.charge_approve_time;
      this.form1.time = row.finance_approve_time;
      this.form.anser =
        row.charge_approve_state == "0"
          ? "未审核"
          : row.charge_approve_state == "1"
          ? "通过"
          : "驳回";
      this.form1.anser =
        row.finance_approve_state == "0"
          ? "未审核"
          : row.finance_approve_state == "1"
          ? "通过"
          : "驳回";
      this.form.msg = row.charge_approve_state == "2" ? row.reject_reason : "";
      this.form1.msg =
        row.finance_approve_state == "2" ? row.reject_reason : "";
    },
    // 导出excel
    async excel() {
      let res = await rechargeWithdrawalAudit({
        page: 1,
        pageSize: 10000,
        phone: this.phone,
        id: this.id,
        startDate: this.gradeTimeValStartDate,
        endDate: this.gradeTimeValEndDate,
        state: this.stateVal,
        orderNum: this.orderNum,
        operat_type: this.checkVal,
        account_type: this.styleVal,
      });

      res.data.list.forEach((item) => {
        item.operat_type == 1
          ? (item.operat_type = "自动审核")
          : (item.operat_type = "人工审核");
      });
      const head = [
        "申请时间",
        "提现时间",
        "用户ID",
        "用户昵称",
        "提现金额",
        "提现方式",
        "审核方式",
        "提现结果",
      ];
      const fiald = [
        "requestTime",
        "finance_approve_time",
        "userId",
        "name",
        "withdrawalAmount",
        "account_type",
        "operat_type",
        "withdrawalStatus",
      ];
      this.$excel(res.data.list, head, fiald, `用户充值记录`);
    },
  },
};
</script>

<style lang="less" scoped>
.WithdrawalRecord {
  margin: 30px;
  height: 100%;

  .searchBox {
    .one {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .el-input {
        width: 200px;
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .el-select {
        margin-right: 20px;
      }

      .el-button {
        margin-left: 20px;
        height: 40px;
      }
      p {
        margin-right: 10px;
      }
    }
  }
  .p {
    display: flex;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
